<template>
    <a-spin :spinning="confirmLoading">

        <a-tabs v-model="activeKey">
            <!--主表区域 -->
            <a-tab-pane tab="中间库服务" :key="refKeys[0]" :forceRender="true" :class="'jeecg-tabs-top'" :animated="false">
                <j-form-container :disabled="formDisabled">
                    <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
                        <a-row>
                            <a-col :xs="24" :sm="8">
                                <a-form-model-item label="服务类型" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="serverType">
                                    <j-dict-select-tag type="list" v-model="model.serverType" dictCode="msi_server_type"
                                                       placeholder="请选择服务类型"/>
                                </a-form-model-item>
                            </a-col>
                            <a-col :xs="24" :sm="16">
                                <a-form-model-item label="服务描述" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="serverDesc">
                                    <a-input v-model="model.serverDesc" placeholder="请输入服务描述"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :xs="24" :sm="8">
                                <a-form-model-item label="服务名" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="serverCode">
                                    <a-input v-model="model.serverCode" placeholder="请输入服务名"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :xs="24" :sm="16">
                                <a-form-model-item label="服务地址" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="serverAddress">
                                    <a-input v-model="model.serverAddress" placeholder="请输入服务地址"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :xs="24" :sm="8" v-if="model.serverType =='WS'">
                                <a-form-model-item label="方法名" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="webMethod">
                                    <a-input v-model="model.webMethod" placeholder="请输入方法名"></a-input>
                                </a-form-model-item>
                            </a-col>
                            <a-col :xs="24" :sm="8" v-if="model.serverType =='REST'">
                                <a-form-model-item label="restMethod" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="restMethod">
                                    <a-input v-model="model.restMethod" placeholder="请输入方法名"></a-input>

                                   <!-- <j-dict-select-tag type="list"
                                                       v-model="model.restMethod"
                                                       dictCode="rest_method"
                                                       placeholder="请选择restMethod"/>-->
                                </a-form-model-item>
                            </a-col>
                            <a-col :xs="24" :sm="16" v-if="formDisabled">
                                <a-form-model-item label="状态" :labelCol="labelCol" :wrapperCol="wrapperCol"
                                                   prop="status">
                                    <j-dict-select-tag type="list" v-model="model.status" dictCode="status"
                                                       placeholder="请选择状态"/>
                                </a-form-model-item>
                            </a-col>

                        </a-row>
                    </a-form-model>
                </j-form-container>
            </a-tab-pane>
            <!--子表单区域 -->
            <a-tab-pane tab="中间库服务任务" :key="refKeys[1]" :forceRender="true">
                <msi-server-task-list ref="subList" :serverId="this.model.id"
                                      :serverCode="this.model.serverCode"></msi-server-task-list>
            </a-tab-pane>

        </a-tabs>
    </a-spin>
</template>

<script>
    import { httpAction } from '@/api/manage'
    import MsiServerTaskList from '../subTables/MsiServerTaskList'

    export default {
        name: 'MsiServerForm',
        mixins: [],
        components: {
            MsiServerTaskList
        },
        data() {
            return {
                labelCol: {
                    xs: { span: 24 },
                    sm: { span: 5 },
                },
                wrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 16 },
                },
                confirmLoading: false,
                model: {restMethod:"POST"},
                validatorRules: {
                    serverType: [
                        { required: true, message: '请输入服务类型!' },
                    ],
                    serverCode: [
                        { required: true, message: '请输入服务名!' },
                    ],
                    serverDesc: [
                        { required: true, message: '请输入服务描述!' },
                    ],
                    serverAddress: [
                        { required: true, message: '请输入服务地址!' },
                    ],

                },
                refKeys: ['msiServer', 'msiServerTask',],
                tableKeys: ['msiServerTask',],
                activeKey: 'msiServer',
                url: {
                    add: '/msibase/msiServer/add',
                    edit: '/msibase/msiServer/edit',
                    msiServer: {
                        list: '/msibase/msiServer/queryById'
                    },
                    msiServerTask: {
                        list: '/msibase/msiServer/queryMsiServerTaskByMainId'
                    },
                }
            }
        },
        props: {
            //表单禁用
            disabled: {
                type: Boolean,
                default: false,
                required: false
            }
        },
        computed: {
            formDisabled() {
                return this.disabled
            },
        },
        methods: {
            add() {
                this.edit()
            },
            edit(record) {
                this.model = Object.assign({}, record)
                if (this.model.id) {
                    this.$refs.subList.queryParam.id = this.model.id
                    this.$refs.subList.msiServer = record
                    this.$refs.subList.loadData(1)
                }
                //初始化大类
                this.visible = true
            },

            /** 确定按钮点击事件 */
            close() {
                this.visible = false
                this.$emit('close')
                this.$refs.form.clearValidate()
            },
            submitForm() {
                const that = this
                // 触发表单验证
                this.$refs.form.validate(valid => {
                    if (valid) {
                        that.confirmLoading = true
                        let httpurl = ''
                        let method = ''
                        if (!this.model.id) {
                            httpurl += this.url.add
                            method = 'post'
                        } else {
                            httpurl += this.url.edit
                            method = 'put'
                        }
                        httpAction(httpurl, this.model, method).then((res) => {
                            if (res.success) {
                                that.$message.success(res.message)
                                that.$emit('ok')
                            } else {
                                that.$message.warning(res.message)
                            }
                        }).finally(() => {
                            that.confirmLoading = false
                        })
                    }

                })
            },
        }
    }
</script>

<style scoped>
    /** tab panel 中有下拉框/日期 这类带下拉效果的，需要加此样式 */
    /deep/ .jeecg-tabs-top {
        overflow: visible;
    }
</style>
